<template>
    <div class="header">
        <el-tabs type="card" v-model="activePane" @tab-click="handleTab">
            <el-tab-pane label="监控结果概况" name="1">
                <MonitorResultList ref="MonitorResultList" />
            </el-tab-pane>
            <el-tab-pane label="监控结果明细" name="2">
                <MonitorResultDetail />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import MonitorResultList from './monitor-result/monitor-result-list.vue';
import MonitorResultDetail from './monitor-result/monitor-result-detail.vue';
import { VueObject } from 'vue/types/index';

@Component({ name: 'MonitorResult', components: { MonitorResultList, MonitorResultDetail } })
export default class MonitorResult extends Vue {
    activePane: string = '1';
    tabKey: number = 0;

    mounted() {
        window.addEventListener('message', this.refresh);
    }

    destroyed() {
        window.removeEventListener('message', this.refresh);
    }

    refresh(event) {
        if (event.data === 'Refresh') {
            console.log('vue-Refresh!');
            window.location.reload();
        }
    }

    handleTab(data): void {
        if (data.name === '1') {
            (this.$refs['MonitorResultList'] as VueObject).handleTabChange();
        }
    }
}
</script>
<style lang="scss" scoped>
.header {
    min-width: 1200px;
    padding-top: 4px;
    height: 100%;
}
/deep/ .el-tabs > .el-tabs__header .el-tabs__item {
    border: 1px solid #e4e7ed;
    // border-bottom: none;
    padding: 0 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    &:nth-child(2) {
        padding-left: 14px;
    }
    &:last-child {
        padding-right: 14px;
    }
}
/deep/ .el-tabs {
    height: 100%;
    .el-tabs__nav {
        border: none;
        .is-active {
            border-color: #409eff;
            border-bottom: 2px solid #409eff;
        }
    }
    .el-tabs__content {
        // padding: 20px;
        height: calc(100% - 35px);
        overflow: auto;
        .el-tab-pane {
            color: #333;
            height: 100%;
        }
    }
}

/deep/ .el-form .el-form-item__label {
    color: #333;
    padding: 0px;
}
/deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    // line-height: 34px;
    padding: 0 25px !important;
}

/deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
    border-right: 0px solid #fff;
}
// /deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(-n + 2) .el-icon-close {
//     display: none;
// }
</style>
